<template>
	<view class="product-box">
		<view class="product-item" @click="pageRoute('/servePages/integral-shop/integral-detail?id='+goods.id)">
			<image class="thnum" :src="$imageUrl(goods.logo)" mode="aspectFill"></image>
			<view class="info">
				<view class="name ">{{ goods.name }}</view>
				<view class="other">
					<view class="price">
						<view class="price-item" v-if="goods.exchange_type == 1">
							<view class="integral-val">
								<text class="integral">{{ goods.points }}</text>
								<text class="integral-tag">积分</text>
							</view>
						</view>
						<view class="price-item" v-if="goods.exchange_type == 2">
							<view class="integral-val">
								<text class="integral">{{ goods.points }}</text>
								<text class="integral-tag">积分</text>
							</view>
							<view v-if="goods.points > 0 && goods.sale_price > 0">+</view>
							<view class="integral-val">
								<text class="integral">￥{{ goods.sale_price }}</text>
							</view>
						</view>
						<view class="price-item" v-if="goods.exchange_type == 0">
							<view class="integral-val">
								<text class="integral">￥{{ goods.sale_price }}</text>
							</view>
						</view>
						<view class="price-item">
							<text class="integral-sale">已售</text>
							<text class="sale">{{ goods.sales_sum }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		defineProps,
	} from 'vue';

	defineOptions({
		name: 'integral-goods'
	});

	const props = defineProps({
		goods: {
			type: Object,
			default: {},
		},
	})

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}
</script>

<style lang="scss">
	.product-box {
		.product-item {
			overflow: hidden;
			margin-bottom: $m24;
			background-color: $u-bg-color;
			border-radius: $radius-12;
			width: 325rpx;

			.thnum {
				width: 325rpx;
				height: 325rpx;
				border-radius: 10rpx;
			}

			.info {
				padding: 0 $m12;

				.name {
					height: 80rpx;
					font-size: $font-26;
					color: $u-main-color;
				}

				.other {
					@include f-between;
					margin: $m8 0;
					position: relative;

					.price {
						.price-item {
							line-height: 1;
							@include f-center;
							color: $u-tips-color;
							font-weight: 500;
							justify-content: left;

							.integral {
								height: 28rpx;
								padding: 0 5rpx;
								font-size: 28rpx;
								font-weight: bold;
								color: #fa3534;
							}

							.integral-tag {
								padding: 0 2rpx;
								font-size: 24rpx;
								color: #fa3534;
							}

							.integral-sale {
								color: gray;
								font-size: 24rpx;
							}

							.sale {
								color: gray;
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}
	}
</style>